<template>
  <div id="app">
    
    <transition :name="transitionName">
      <keep-alive>
        <router-view v-if="isKeepAlive">
            <!-- 这里是会被缓存的视图组件 -->
        </router-view>
      </keep-alive>
    </transition>
    <transition :name="transitionName">
      <router-view v-if="!isKeepAlive">
          <!-- 这里是不被缓存的视图组件 -->
      </router-view>
    </transition>

  </div>
</template>

<script>

  export default {
    name: 'App',
    data() {
      return {
        transitionName: '',
        isKeepAlive: this.$route.meta.keepAlive
      }
    },
    mounted() {

    },
    watch: {
      '$route' (to, from) {
        let isBack = this.$router.isBack  //监听路由变化时的状态为前进还是后退
        if(isBack) {
          this.transitionName = 'slide-right'
        } else {
          this.transitionName = 'slide-left'
        }
        this.$router.isBack = false  
      }
    }
    
  }

</script>

<style lang="stylus">

body, html
  font-family 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', arial, sans-serif, 'Droid Sans Fallback'
  user-select none
  -webkit-tap-highlight-color transparent
.slide-left-enter-active, .slide-left-leave-active
      transition all 0.3s 
.slide-left-enter
      transform translateX(100%)
.slide-right-enter-active, .slide-right-leave-active
      transition all 0.3s 
.slide-right-enter
      transform translateX(-100%)

</style>
